<template>
	<view class="login-container">
		<!-- 背景装饰 -->
		<view class="decoration deco-1"></view>
		<view class="decoration deco-2"></view>
		
		<view class="header">
			<text class="title">欢迎回来</text>
			<text class="subtitle">请登录您的账户</text>
		</view>
		
		<view class="form-container">
			<view class="input-group">
				<view class="input-item">
					<text class="input-label">手机号</text>
					<input 
						class="input" 
						v-model="phone" 
						placeholder="请输入手机号" 
						placeholder-class="placeholder"
						type="number"
						maxlength="11"
					/>
					<text class="input-icon">📱</text>
				</view>
				
				<view class="input-item">
					<text class="input-label">密码</text>
					<input 
						class="input" 
						v-model="password" 
						placeholder="请输入密码" 
						placeholder-class="placeholder"
						:password="!showPassword"
					/>
					<text class="input-icon" @click="showPassword = !showPassword">
						{{ showPassword ? '👁️' : '👁️‍🗨️' }}
					</text>
				</view>
			</view>
			
			<view class="forgot-password">
				<text @click="navigateToForgot">忘记密码？</text>
			</view>
			
			<button class="login-btn" :class="{ 'loading': loading }" @click="handleLogin">
				<text v-if="!loading">登录</text>
				<text v-else>登录中...</text>
			</button>
			
			<view class="register-link">
				<text>还没有账户？</text>
				<text class="link" @click="navigateToRegister">立即注册</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '',
				password: '',
				showPassword: false,
				loading: false,
				baseUrl: 'http://localhost:3000/api'
			}
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			
			async handleLogin() {
				// 手机号校验
				if (!this.phone) {
					uni.showToast({ title: '请输入手机号', icon: 'none' });
					return;
				}
				if (!/^1[3-9]\d{9}$/.test(this.phone)) {
					uni.showToast({ title: '请输入正确的手机号', icon: 'none' });
					return;
				}
				
				// 密码校验
				if (!this.password) {
					uni.showToast({ title: '请输入密码', icon: 'none' });
					return;
				}
				if (this.password.length < 6) {
					uni.showToast({ title: '密码长度不少于6位', icon: 'none' });
					return;
				}
				
				this.loading = true;
				// 调用实际登录接口
				try {
					await this.login();
				} catch (error) {
					uni.showToast({
						title: '登录失败',
						icon: 'error'
					});
				} finally {
					this.loading = false;
				}
			},
			
			login() {
				return new Promise((resolve, reject) => {
					uni.request({
						url: `${this.baseUrl}/login`, // 匹配后端接口路径
						method: 'POST',
						// 调整参数名以匹配后端接收的inputVal和inputPwd
						data: { 
							phone: this.phone, 
							password: this.password 
						},
						success: (res) => {
							if (res.data.code === 200) {
								// 存储用户信息
								uni.setStorageSync('userInfo', res.data.data);
								uni.showToast({
									title: '登录成功',
									icon: 'success',
									// 登录页登录成功后
									// uni.setStorageSync('token', res.data.token);
									// uni.setStorageSync('userInfo', res.data.userInfo);
								});
								// 登录成功后跳转到首页
								setTimeout(() => {
									uni.switchTab({
										// url: '/pages/shop/shop'
										url:'/pages/my/my'
									});
								}, 1500);
								resolve();
							} else {
								uni.showToast({ 
									title: res.data.message || '登录失败', 
									icon: 'none' 
								});
								reject(res.data.message);
							}
						},
						fail: (err) => {
							uni.showToast({ 
								title: '网络错误，请稍后重试', 
								icon: 'none' 
							});
							reject(err);
						}
					});
				});
			},
			
			navigateToRegister() {
				uni.navigateTo({
					url: '/pages/index/register/register'
				});
			},
			
			navigateToForgot() {
				uni.navigateTo({
					url: '/pages/index/login/forgot'
				});
			}
		}
	}
</script>

<style>
	.login-container {
		min-height: 100vh;
		background: linear-gradient(135deg, #f8f5ff 0%, #e6e6fa 100%);
		padding: 40rpx;
		position: relative;
	}
	
	.decoration {
		position: absolute;
		border-radius: 50%;
		opacity: 0.4;
		filter: blur(40rpx);
	}
	
	.deco-1 {
		width: 300rpx;
		height: 300rpx;
		background: #9370db;
		top: -100rpx;
		right: -100rpx;
	}
	
	.deco-2 {
		width: 200rpx;
		height: 200rpx;
		background: #ffb6c1;
		bottom: 100rpx;
		left: -50rpx;
	}
	
	.header {
		margin-top: 120rpx;
		margin-bottom: 80rpx;
	}
	
	.back-icon {
		font-size: 48rpx;
		color: #6a4894;
		margin-bottom: 30rpx;
		display: block;
	}
	
	.title {
		font-size: 56rpx;
		font-weight: bold;
		color: #6a4894;
		display: block;
		margin-bottom: 20rpx;
	}
	
	.subtitle {
		font-size: 32rpx;
		color: #9370db;
		opacity: 0.8;
	}
	
	.form-container {
		background: white;
		border-radius: 30rpx;
		padding: 60rpx 40rpx;
		box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.1);
	}
	
	.input-group {
		margin-bottom: 50rpx;
	}
	
	.input-item {
		margin-bottom: 40rpx;
		position: relative;
	}
	
	.input-label {
		font-size: 32rpx;
		color: #6a4894;
		font-weight: 500;
		margin-bottom: 20rpx;
		display: block;
	}
	
	.input {
		height: 100rpx;
		border: 2rpx solid #e6e6fa;
		border-radius: 20rpx;
		padding: 0 100rpx 0 30rpx;
		font-size: 32rpx;
		background: #fafafa;
	}
	
	.input:focus {
		border-color: #8a2be2;
		background: white;
	}
	
	.placeholder {
		color: #c0c0c0;
		font-size: 32rpx;
	}
	
	.input-icon {
		position: absolute;
		right: 30rpx;
		bottom: 30rpx;
		font-size: 40rpx;
	}
	
	.forgot-password {
		text-align: right;
		margin-bottom: 60rpx;
	}
	
	.forgot-password text {
		color: #9370db;
		font-size: 28rpx;
	}
	
	.login-btn {
		background: linear-gradient(135deg, #8a2be2, #6a4894);
		color: white;
		height: 100rpx;
		border-radius: 25rpx;
		font-size: 36rpx;
		font-weight: bold;
		border: none;
		margin-bottom: 50rpx;
	}
	
	.login-btn.loading {
		opacity: 0.7;
	}
	
	.register-link {
		text-align: center;
		font-size: 28rpx;
		color: #666;
	}
	
	.link {
		color: #8a2be2;
		font-weight: bold;
		margin-left: 20rpx;
	}
</style>